<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="description" itemprop="description" content="聚合搜索，让搜索更快更简单" />
    <title>聚合搜索</title>
    <link rel='stylesheet' href='soui.css'>
    <script src="so.js"></script>
	
    <style type="text/css">
body {
    display: block;
    margin-top: 12px;
    margin-right: 12px;
    margin-bottom: 100px;
    margin-left: 12px;
}
		
.main-search,.select-search {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0px;
    border-radius: 3px;
    border: solid 1.2px #eee;
    height: 2em;
    margin-bottom: 0;
}

.main-search{
    overflow: hidden;
    position: relative;
}

.select-search{
    margin-top: 12px ;
    height: auto;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none;
}

#keyword {
    width: 80%;
    height: 2em;
    line-height: 1em;
    font-size: 1em;
    border: none;
    padding-left: 10px;
}

input:focus{
    outline: none;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

li{
    font-size: 1.1em;
    line-height: 2.2em;
    font-weight: 500;
    color: #212121;
    padding-left: 10px;
    border-top: solid 1.2px #eee;
}

.search{
    display: inline-block;
    height: 2em;
    width: 2em;
    background-color: #2196f3;
    position: absolute;
    right: 0;
    top: 0;
}

.icon{
    margin: 0.3em;
    width: 1.4em;
    height: 1.4em;
}
    </style>
	
</head>
<body>
	
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<div class="main-search">
    <input id="keyword" type="text" placeholder="输入搜索内容"/>
    <div class="search">
        <img class="icon" src="" alt="">
    </div>
</div>
<div class="select-search">
<ul class="search-ul">

</ul>
</div>

	<script type="text/javascript" language="javascript">
/*
"title": "显示在候选列表",
"urlLeft": "关键字左边的网址",
"urlRight": "关键字右边的网址"
*/
var list = [
    {
        "title": "使用 百度 搜索",
        "urlLeft": "https://www.baidu.com/s?word=",
        "urlRight": ""
    },
    {
        "title": "使用 谷歌 搜索 [注意长城]",
        "urlLeft": "https://www.google.com/search?q=",
        "urlRight": ""
    },
    {
        "title": "使用 山寨谷歌 搜索",
        "urlLeft": "https://www.googlebridge.com/search?q=",
        "urlRight": ""
    },
    {
        "title": "使用 360 搜索",
        "urlLeft": "https://www.so.com/s?q=",
        "urlRight": ""
    },
    {
        "title": "使用 搜狗 搜索",
        "urlLeft": "https://www.sogou.com/web?query=",
        "urlRight": ""
    },
    {
        "title": "使用 必应 搜索（国内版）",
        "urlLeft": "https://cn.bing.com/search?q=",
        "urlRight": "&FORM=BESBTB"
    },
  	{
        "title": "使用 必应 搜索（国际版）",
        "urlLeft": "https://cn.bing.com/search?q=",
        "urlRight": "&FORM=BESBTB&ensearch=1"
    },
    {
        "title": "使用 Yahoo 搜索",
        "urlLeft": "https://search.yahoo.com/search?p=",
        "urlRight": ""
    },
    {
        "title": "使用 Yandex 搜索",
        "urlLeft": "https://yandex.com/search/?text=",
        "urlRight": ""
    },
    {
        "title": "使用 DuckDuckGo 搜索（需fq）",
        "urlLeft": "https://duckduckgo.com/?q=",
        "urlRight": ""
    },
    {
        "title": "使用 中国搜索 搜索（手机）",
        "urlLeft": "http://m.chinaso.com/page/search.htm?keys=",
        "urlRight": ""
    },
  	{
        "title": "使用 中国搜索 搜索（电脑）",
        "urlLeft": "http://www.chinaso.com/search/pagesearch.htm?q=",
        "urlRight": ""
    },
    {
        "title": "使用 伍佰亿 搜索",
        "urlLeft": "http://www.wubaiyi.com/s?wd=",
        "urlRight": ""
    },
    {
        "title": "使用 MEZW 搜索",
        "urlLeft": "https://so.mezw.com/Search?wd=",
        "urlRight": ""
    },
    {
        "title": "使用 酷安 搜索",
        "urlLeft": "https://www.coolapk.com/search?q=",
        "urlRight": ""
    },
    {
        "title": "使用 哔哩哔哩 搜索（手机）",
        "urlLeft": "https://m.bilibili.com/search.html?keyword=",
        "urlRight": ""
    },
  	{
        "title": "使用 哔哩哔哩 搜索（电脑）",
        "urlLeft": "https://search.bilibili.com/all?keyword=",
        "urlRight": ""
    },
    {
        "title": "使用 淘宝 搜索（手机）",
        "urlLeft": "https://s.m.taobao.com/h5?q=",
        "urlRight": ""
    },
    {
        "title": "使用 淘宝 搜索（电脑）",
        "urlLeft": "https://s.taobao.com/search?q=",
        "urlRight": ""
    },
    {
        "title": "使用 天猫 搜索",
        "urlLeft": "https://list.tmall.com/search_product.htm?q=",
        "urlRight": "&type=p&tmhkh5=&spm=a220m.6910245.a2227oh.d100&from=mallfp..m_1_searchbutton"
    },
    {
        "title": "使用 京东 搜索（手机）",
        "urlLeft": "https://so.m.jd.com/ware/search.action?keyword=",
        "urlRight": ""
    },
    {
        "title": "使用 京东 搜索（电脑）",
        "urlLeft": "https://search.jd.com/Search?keyword=",
        "urlRight": "&enc=utf-8"
    },
    {
        "title": "使用 微博 搜索",
        "urlLeft": "http://s.weibo.com/weibo/",
        "urlRight": ""
    },
    {
        "title": "使用 Github 搜索",
        "urlLeft": "https://github.com/search?utf8=✓&q=",
        "urlRight": ""
    },
    {
        "title": "使用 知乎 搜索",
        "urlLeft": "https://www.zhihu.com/search?type=content&q=",
        "urlRight": ""
    },
    {
        "title": "使用 豆瓣 搜索（手机）",
        "urlLeft": "https://m.douban.com/search/?query=",
        "urlRight": ""
    },
    {
        "title": "使用 豆瓣 搜索（电脑）",
        "urlLeft": "https://www.douban.com/search?q=",
        "urlRight": ""
    },
    {
        "title": "使用 维基百科 搜索",
        "urlLeft": "https://zh.wikipedia.org/wiki/",
        "urlRight": ""
    }
];

$(document).ready(function () {
    init();
    $(".select-search").hide();
    $("#keyword").bind("input propertychange change", function (event) {
        if ($('#keyword').val().length == 0) {
            $(".select-search").hide();
        } else {
            $(".select-search").show();
        }
    });
    $(document).on("click", ".search-web", function () {
        var index = $(this).index();
        var urlL = list[index].urlLeft;
        var urlR = list[index].urlRight;
        if ($('#keyword').val().length != 0) {
            var urlOpen = urlL + $('#keyword').val() + urlR;
            window.open(urlOpen);
        }
    });

});

function init() {
    for (var i = 0; i < list.length; i++) {
        var li = document.createElement("li");
        li.setAttribute("class", "search-web");
        li.innerHTML = list[i].title;
        $(".search-ul")[0].appendChild(li);
    }
}
	</script>
</body>
</html>
